<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="wscn-http404-img">
        <div class="wscn-http404-img-element" />
        <div class="clear" />
      </div>
      <div class="wscn-http404-content">
        <h1 class="wscn-http404-title">浏览器版本不兼容</h1>
        <p class="wscn-http404-desc">浏览器版本过低，为避免可能存在的安全隐患，推荐使用以下浏览器。</p>
        <div class="wscn-browser">
          <div v-for="(item,key) in browser" :key="key" class="wscn-browser-item">
            <a target="_blank" :href="item.link">
              <svg-icon :icon-class="item.name" />
              <span>{{ item.name }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IE',
  data() {
    return {
      browser: [
        {
          name: 'chrome',
          link: 'https://www.google.cn/chrome'
        },
        {
          name: 'edge',
          link: 'https://www.microsoft.com/zh-cn/edge'
        },
        {
          name: 'firefox',
          link: 'http://www.firefox.com.cn'
        },
        {
          name: '360',
          link: 'https://browser.360.cn/ee'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;

  .wscn-http404 {
    display: flex;
    align-items: center;
    height: 80%;
    min-height: 480px;

    .wscn-http404-img {
      flex: 0 0 52.5%;
      width: 52.5%;
      padding-right: 48px;
      zoom: 1;
      .wscn-http404-img-element {
        background-image: url('~@/assets/error_images/500.png');
        float: right;
        width: 100%;
        max-width: 460px;
        height: 360px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
      }
    }
    .wscn-http404-content {
      -webkit-box-flex: 1;
      -ms-flex: auto;
      flex: auto;
      .wscn-http404-title {
        margin-bottom: 24px;
        color: #515a6e;
        font-weight: 600;
        font-size: 30px;
        line-height: 24px;
      }

      .wscn-http404-desc {
        margin-bottom: 16px;
        color: #808695;
        font-size: 16px;
        line-height: 28px;
      }

      .wscn-browser {
        margin: 24px 0 0 0;
        display: flex;
        .wscn-browser-item {
          margin-right: 36px;
          text-align: center;
          cursor: pointer;
          transition: all 0.5s;
          -webkit-filter: grayscale(1);
          filter: grayscale(1);
          &:first-of-type {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
          }
          &:hover {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
          }
          .svg-icon {
            font-size: 36px;
          }
          span {
            display: block;
            color: #808695;
            line-height: 48px;
          }

          &:last-of-type {
            margin-right: 0 !important;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
@media screen and (max-width: 768px) {
  .wscn-http404 {
    display: block !important;
    text-align: center;
  }
  .wscn-http404-img {
    margin: 0 auto;
    padding-right: 0 !important;
  }
  .wscn-browser {
    justify-content: center !important;
  }
}
</style>
